<template>
  <div class="form_box">
    <div class="title">请 登 陆</div>
    <el-form class="form_content" ref="form" :rules="rules" :model="form" label-width="120px" hide-required-asterisk>
      <el-form-item label="班级" name="class" required>
        <el-cascader
          style="width: 280px"
          v-model="form.class"
          :options="classOptions"
          :props="{ expandTrigger: 'hover', emitPath: false }"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="姓名" name="name" required>
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <div class="submit_box">
        <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { testData } from "@/components/testData.js";
export default {
  data() {
    return {
      form: {
        name: "",
        class: "",
      },
      classOptions: [],
      rules: {
        name: [{required: true}],
        class: [{required: true}]
      }
    };
  },
  methods: {
    // 获取年级、班级数据
    getClassOptions() {
      this.classOptions = testData.classList;
      this.classOptions.forEach(item => {
        item.children.forEach(citem => {
          citem.value = item.label + citem.label
        })
      })
      console.log(this.classOptions)
    },
    // 选择年级/班级
    handleChange(val) {
      console.log(val)
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form);
          const user = this.form.class + ' ' + this.form.name;
          sessionStorage.setItem('user', user);
          this.$router.push('/index');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  mounted() {
    this.getClassOptions();
  },
};
</script>

<style lang="less" scoped>
.form_box {
  margin: 210px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 480px;
  background: #f1f2f6;
  .title {
    padding: 20px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
  }
  .form_content {
    width: 400px;
    margin: 30px auto;
  }
  .submit_box {
    margin: 20px auto;
    text-align: center;
  }
}
</style>
